import { JSX } from "preact/jsx-runtime";
import { useSignal } from "@preact/signals";
interface Title extends Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "icon"> {
  icon?: JSX.Element;
}
export interface HobbyItem {
  title: Title;
  description: string | Array<string>;
  key: string;
}
interface HobbyProps {
  items?: HobbyItem[];
}
export default (props: HobbyProps) => {
  const hash = decodeURIComponent(location?.hash?.slice?.(1));
  const currentAction = useSignal<string | number>(
    hash ?? 0,
  );
  return (
    <div class="border-b border-gray-200 dark:border-gray-700">
      <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
        {props.items?.map((item, index) => {
          const { title: { icon, href, children, onClick, ...ops }, key } =
            item;
          const activeclass =
              "inline-flex items-center justify-center p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500 group",
            normalClass =
              "inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group";
          return (
            <li class="me-2" key={key ?? index}>
              <a
                href={href ?? `#${key}`}
                class={currentAction.value === key ? activeclass : normalClass}
                onClick={(e) => {
                  currentAction.value = key || index;
                  onClick?.(e);
                }}
                {...ops}
              >
                {icon} {children}
              </a>
            </li>
          );
        })}
      </ul>
      {props.items?.map((item, index) => {
        return (
          <div
            id={item.key ?? index}
            class="hidden target:block p-6 min-h-36 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full"
          >
            {Array.isArray(item.description)
              ? item.description.map((desc, index) => <p key={index}>{desc}</p>)
              : <p>{item.description}</p>}
          </div>
        );
      })}
    </div>
  );
};
